﻿@using MonackFr.Library.Module
@{
	ViewBag.Title = "Default";
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/css/bootstrap")
    @Styles.Render("~/css/monackfr")
</head>
<body ng-app="monackfr">
    <h1>The Monack Framework</h1>

<a ui-sref="tiles()" class="home-button">Home</a>
<section ui-view="menu"></section>
<section ui-view="content"></section>

    @Scripts.Render("~/scripts/angular")
    @Scripts.Render("~/scripts/jquery")
    @Scripts.Render("~/scripts/bootstrap")
    @Scripts.Render("~/scripts/monackfr")


<script>
    ///
    /// config for router
    ///
    monackfr.config([
        '$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise('/tiles');

            $stateProvider
                .state('tiles',
                {
                    url: '/tiles',
                    views: 
                    {
                        'content':
                        {
                            templateUrl: 'main/tile',
                            controller: 'tile-controller',
                            controllerAs: 'tile'
                        }
                    }
                })
            @foreach (State state in ViewBag.States)
            {
                @Html.Raw(".state('" + state.Name + "', { " + state.Config + "})")

            };
        }
    ]);
</script>

@foreach (var scriptSource in ViewBag.ScriptSources)
    {
        <script src="@scriptSource"></script>
    }

</body>
</html>
